<template>
  <div class="imgbox">
    <ul class="img-item clearfix" id="imgbox">
      <li v-for="img in imgdata">
        <img :src="img">
      </li>
    </ul>
    <div class="spot">
      <span class="active"></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { slide } from '../../common/js/slide.js';
    export default {
      props: {
        imgList: Array,
        default: []
      },
      data () {
        return {
          imgdata: [
            'static/img/1.jpg',
            'static/img/2.jpg',
            'static/img/3.jpg',
            'static/img/4.jpg',
            'static/img/5.jpg'
          ]
        };
      },
      updated() {
         slide('img', 'li');
      }
    };
</script>

<style lang="scss" scoped>
  .imgbox{
    width: 100%;
    height:200px;
    border-bottom: 1px solid red;
    position: relative;
    overflow:hidden;

    .img-item{
      position: absolute;
      width: 500%;
      left: 0;

      li{
        width: 20%;
        float: left;

        img{
          width: 100%;
          height: 200px;
        }
      }
    }

    .spot {
      position: absolute;
      width: 100px;
      bottom: 5%;
      left: 50%;
      margin-left: -50px;

      span{
        display: inline-block;
        margin-right:5px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #ff0;
        cursor: pointer;
      }
      .active{
        background-color: #40B883;
      }
    }
  }
</style>
